import React, {memo, useEffect, useState} from 'react'
import {Layout, ConfigProvider} from 'antd'
import {connect, useDispatch} from 'umi'
import FixedBar from './fixedBar'
import BreadcrumbDom from './breadcrumb'
import styles from './styles/index.less'
import Sider from './sider'
import Header from './header'
import {GlobalState} from '@/models/global'
import Page404 from './status-pages/404'
import Loading from './status-pages/Loading'
import {antdGlobalConfig} from '@/config/antd-theme'
import {systemConfig} from '@/config/env-config'
import {getUserInfo} from '@/utils/index'
import {getUserMenu} from '@/service/system/menu'
import {userInfo} from '@/service/system/user'
import {foreachToTree, translateDataToTree} from '@/utils/common/index'
import {generateMenus} from '@/utils/helper'

export interface BaseLayoutProps {
	children: React.ReactNode
	global: GlobalState
	history: any
	user: any
	loading: any
}
const BaseLayout = memo(
	({children, global, history, loading}: BaseLayoutProps) => {
		const dispatch = useDispatch()
		function getPage() {
			// 404
			if (!global.currentRoute) return <Page404 />
			// 正常
			return (
				<>
					{loading.global ? <Loading /> : ''}
					{children}
				</>
			)
		}

		// 初始化-需求部门数据
		// eslint-disable-next-line no-shadow
		const getMenuData = (callback: any) => {
			getUserMenu().then((res: any) => {
				if (res.success) {
					callback(res?.data)
				} else {
					callback([])
				}
			})
		}

		useEffect(() => {
			getMenuData((menuList: any) => {
				if (menuList) {
					const menuTree: any = translateDataToTree(menuList)
					foreachToTree(menuTree)
					const router = generateMenus(menuTree, menuList)
					dispatch({
						type: 'user/updateMenuTree',
						payload: {
							menuTree,
						},
					})
					dispatch({
						type: 'user/updateHeaderMenu',
						payload: {headerMenu: router},
					})
					// 获取动态菜单
					if (dispatch) {
						dispatch({
							type: 'user/updateMenu',
							payload: {menu: menuList},
						})
					}
				}
			})
		}, [])
		useEffect(() => {
			userInfo().then((res: any) => {
				dispatch({
					type: 'user/updateUserInfo',
					payload: {userName: res?.data?.name, userId: res?.data?.id},
				})
			})
		}, [])
		// 水印服务
		useEffect(() => {
			if (window.waterMark) {
				const userData = getUserInfo()
				window.waterMark({
					// 系统ID，接入UPM里面的系统ID,就是appId
					systemId: systemConfig.systemId.toString(),
					// SSO里面的账号
					userId: userData.username || 'devuser',
					projectName: systemConfig.systemName,
					textStyle: 'rgba(0,0,0,0.05)',
				})
			}
		}, [window.waterMark])
		const [collapsed] = useState()
		return (
			<ConfigProvider {...antdGlobalConfig}>
				<div className={styles.layout}>
					{!history.location.query.closeMenu ? (
						<Layout.Sider
							width={240}
							trigger={null}
							collapsible
							collapsed={collapsed}>
							<Sider systemName={systemConfig.systemName} />
						</Layout.Sider>
					) : (
						''
					)}
					<Layout className="right-layout">
						{!history.location.query.closeMenu ? (
							<Layout.Header>
								<Header />
							</Layout.Header>
						) : (
							''
						)}
						{!history.location.query.closeMenu
							? global?.tabRoutes?.length > 0 && (
									<div className="fixedBar">
										<FixedBar />
									</div>
							  )
							: ''}
						<BreadcrumbDom />
						<Layout.Content className="content-area">
							{getPage()}
						</Layout.Content>
					</Layout>
				</div>
			</ConfigProvider>
		)
	},
)
export default connect(({global, loading, user}: any) => ({
	global,
	loading,
	user,
}))(BaseLayout)
